<template>
  <div class="lgb-agent1-wrapper">
    <div class="bg-decor decor-1"></div>
    <div class="bg-decor decor-2"></div>

    <header class="hero">
      <h1 class="page-title">欢迎使用Excel聊天助手</h1>
      <p class="subtitle">一句话搞定公式、透视表、数据清洗与报表</p>
    </header>

    <div class="chatbot-container">
      <iframe
 src="http://11.73.23.232/chatbot/JkH0VsZJ1y1xDMTL"
 style="width: 100%; height: 100%; min-height: 860px"
 frameborder="0"
 allow="microphone">
</iframe>
      <div class="watermark-mask"><span class="mask-text">Excel聊天助手</span></div>
    </div>
    <ul class="tips">
      <li>示例：将 A 列手机号打码显示。</li>
      <li>示例：根据表格生成本周销售周报要点。</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LGB_Agent1'
}
</script>

<style scoped>
.lgb-agent1-wrapper {
  padding: 40px 20px 32px;
  text-align: center;
  min-height: calc(100vh - 50px);
  box-sizing: border-box;
  background: radial-gradient(1200px 600px at 10% -10%, #e9f2ff 0%, rgba(233,242,255,0) 60%),
              radial-gradient(900px 500px at 90% 0%, #fff3e8 0%, rgba(255,243,232,0) 60%),
              linear-gradient(180deg, #f8fafc 0%, #f2f5f9 100%);
}

.hero { margin-bottom: 24px; }
.page-title { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: 0.5px; }
.subtitle { margin: 0; color: #6b7280; }

.chatbot-container {
  width: 1024px;
  max-width: 92vw;
  height: 860px;
  margin: 0 auto;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.06), 0 4px 10px rgba(16,24,40,0.04);
}

/* 用遮罩覆盖 iframe 右上角“Powered by Dify”水印 */
.watermark-mask {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px; /* 视情况可调整 */
  height: 48px; /* 视情况可调整 */
  background: rgba(248, 250, 252, 0.85); /* 更贴近背景的浅灰并带透明度 */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
  border-bottom-left-radius: 8px; /* 与容器圆角更协调 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask-text { font-size: 14px; color: #64748b; font-weight: 600; letter-spacing: 1.5px; }

.tips { list-style: none; padding: 12px 0 0; margin: 12px 0 0; color: #6b7280; font-size: 13px; }
.tips li { margin: 4px 0; }

/* 背景装饰光斑 */
.bg-decor { position: absolute; pointer-events: none; z-index: 0; }
.decor-1 { top: 80px; left: 60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.25) 0%, rgba(56,189,248,0) 70%); }
.decor-2 { top: 120px; right: 60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(251,146,60,0.22) 0%, rgba(251,146,60,0) 70%); }
</style>


